<template>
  <JwChat-index
    width="100%"
    height="100%"
    :config="config"
    :showRightBox="true"
    scrollType="scroll"
    :taleList="list"
    @enter="bindEnter"
    @clickTalk="talkEvent"
    v-model="inputMsg"
    :toolConfig="tool">
    <!-- <JwChat-rightbox :config="rightConfig" @click="rightClick" /> -->
  </JwChat-index>
</template>
<script>
export default {
  data() {
    return {
      inputMsg: "",
    //   聊天内容
      list: [
        {
          date: "2020/04/25 21:19:07",
          text: { text: "起床不" },
          mine: false,
          name: "留恋人间不羡仙",
          img: "../../image/left.jpg",
        },
        {
          date: "2020/04/25 21:19:07",
          text: { text: "<img data-src='../../image/left.jpg'/>" },
          mine: false,
          name: "只盼流星不盼雨",
          img: "../../image/left.jpg",
        },
      ],
    //   表情，图片，文件上传
      tool: {
        show: ["file", "history", "img", ["文件1", "", "美图"]],
        showEmoji: true,
        callback: this.toolEvent,
      },
    //    聊天头部信息
      config: {
        img: "../../image/logo.png",
        name: "算法群1",
        dept: "我们不只生产算法，我们还是算法的搬用工",
        callback: this.bindCover,
        historyConfig: {
          show: true,
          tip: "加载更多",
          callback: this.bindLoadHistory,
        },
        quickList: [
          { text: "这里是jwchat，您想了解什么问题。" },
          { text: "jwchat是最好的聊天组件" },
          { text: "谁将烟焚散，散了纵横的牵绊；听弦断，断那三千痴缠。" },
          { text: "长夏逝去。山野间的初秋悄然涉足。" },
          { text: "江南风骨，天水成碧，天教心愿与身违。" },
          { text: "总在不经意的年生。回首彼岸。纵然发现光景绵长。" },
          { text: "外面的烟花奋力的燃着，屋里的人激情的说着情话" },
          { text: "假如你是云，我就是雨，一生相伴，风风雨雨；" },
          {
            text: "即使泪水在眼中打转，我依旧可以笑的很美，这是你学不来的坚强。",
          },
          { text: " 因为不知来生来世会不会遇到你，所以今生今世我会加倍爱你。" },
        ],
      },
    //   右侧公告
      rightConfig: {
        listTip: '当前在线',
        // notice: '【公告】这是一款高度自由的聊天组件，基于AVue、Vue、Element-ui开发。点个赞再走吧 ',
        list: [
          {
            name: 'JwChat',
            "img": "./image/kl.jpg"
          },
          {
            name: '留恋人间不羡仙',
            "img": "./image/left.jpg"
          },
          {
            name: '只盼流星不盼雨',
            "img": "./image/left.jpg"
          }
        ]
      }
    };
  },
  methods: {
    //   历史记录
    bindLoadHistory() {
      const history = new Array(3).fill().map((i, j) => {
        return {
          date: "2020/05/20 23:19:07",
          text: { text: j + new Date() },
          mine: false,
          name: "JwChat",
          img: "image/three.jpeg",
        };
      });
      let list = history.concat(this.list);
      this.list = list;
      console.log("加载历史", list, history);
    },
    //   聊天内容点击（）
    talkEvent(val){
        console.log(val)
    },
    
    // 头部被点击
    bindCover(type) {
      console.log("header", type);
    },
    //  右侧点击
    rightClick (type) {
      console.log('rigth', type)
    },
    // 文件内容
    toolEvent(type, plyload) {
    //     s.indexOf
      if (plyload[0].type.indexOf("image") != -1) {
        let imgSrc=this.getObjectUrl(plyload[0])
        const msgObj = {
          date: new Date().toLocaleString(),
          text: { text:"<img data-src="+imgSrc+">"  },
          mine: true,
          name: "JwChat",
          img: "../../image/three.jpeg",
        };
        this.list.push(msgObj);
      }
      console.log(event.target.value);
    },
    // 生成当前图片的路径
    getObjectUrl(file) {
      let url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      }
      return url;
    },
    bindEnter() {
      const msg = this.inputMsg;
      if (!msg) return;
      const msgObj = {
        date: new Date().toLocaleString(),
        text: { text: msg },
        mine: true,
        name: "JwChat",
        img: "./image/kl.jpg",
      };
      this.list.push(msgObj);
    },
    /**
     * @description:
     * @param {*} type 当前点击的按钮
     * @param {*} plyload 附加文件或者需要处理的数据
     * @return {*}
     */
    /**
     * @description: 点击加载更多的回调函数
     * @param {*}
     * @return {*}
     */   
  },
};
</script>